<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href="img/fav.png">
<!-- Author Meta -->
<meta name="author" content="CodePixar">
<!-- Meta Description -->
<meta name="description" content="">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Site Title -->
<title>场馆信息</title>

<link href="https://fonts.googleapis.com/css?family=Poppins:100,300,500"
	rel="stylesheet">
<link rel="stylesheet"
	href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<!--
		CSS
		============================================= -->
<link rel="stylesheet" href="../css/linearicons.css">
<link rel="stylesheet" href="../css/owl.carousel.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/nice-select.css">
<link rel="stylesheet" href="../css/magnific-popup.css">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">


<script src="../js/vendor/jquery-2.2.4.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/vendor/bootstrap.min.js"></script>
<script src="../js/jquery.ajaxchimp.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="../js/jquery.nice-select.min.js"></script>
<script src="../js/jquery.magnific-popup.min.js"></script>
<script src="../js/main.js"></script>
<script src="../layui/layer/layer.js"></script>
<script src="/bootstrap/popper.12.5.min.js"></script>
<script src="/bootstrap/bootstrap.4.1.0.min.js"></script>
<script src="/vue/Vue.js"></script>
<script src="/vue/axios.js"></script>
<script type="text/javascript">
	$(function(){
		$("#header").load("/zlz/header.html");
	})
</script>

</head>
<body class="bg-light">
	<div id="header"></div>

	<!-- End Banner Area -->
	<div id="all" class="container-fluid">
		<!-- Start History Area -->
		<section class="section-gap history-area">
			<div class="container">
				<div class="history-tab-wrapper">
					<div class="row justify-content-between">
						<div class="col-lg-4">
							<div class="tab-thumb text-center">
								<img :src="gym.avatar" class="img-fluid" alt=""
									style="width: 400px; height: 450px"> <br>
							</div>
						</div>
						<div class="col-lg-6 ml-auto">
							<div class="tab-total-content">
								<div class="nav ilene-tabs" id="myTab" role="tablist">
									<a class="nav-item active" id="nav-home-tab" data-toggle="tab"
										href="#nav-history" role="tab" aria-controls="nav-history"
										aria-selected="true"><span class="lnr lnr-map"></span>基本信息</a>
									<a class="nav-item" id="nav-profile-tab" data-toggle="tab"
										href="#nav-mission" role="tab" aria-controls="nav-mission"
										aria-selected="false"><span class="lnr lnr-bullhorn"></span>教练及课程</a>
									<a class="nav-item" id="nav-contact-tab" data-toggle="tab"
										href="#nav-vission" role="tab" aria-controls="nav-vission"
										aria-selected="false"><span class="lnr lnr-sun"></span>发表留言</a>
									<a class="nav-item" id="nav-contact-tab" data-toggle="tab"
										href="#nav-invite" role="tab" aria-controls="nav-invite"
										aria-selected="false" v-if="role=='coach'"><span
										class="lnr lnr-hand"></span>签约场馆</a> 
										
								</div>
							</div>
							<div class="tab-content mt-40" id="nav-tabContent">
								<div class="tab-pane fade show active" id="nav-history"
									role="tabpanel" aria-labelledby="nav-home-tab">
									<div class="single-content">
										<table class="table table-striped  table-hover  text-center">
											<tr>
												<th class="text-center"><b>场馆名称</b></th>
												<td id="nickname">{{gym.nickname}}</td>
											</tr>

											<tr>
												<th class="text-center"><b>QQ号码</b></th>
												<td id="qq">{{gym.qq}}</td>
											</tr>
											<tr>
												<th class="text-center"><b>微信号码</b></th>
												<td id="wechat">{{gym.wechat}}</td>
											</tr>
											<tr>
												<th class="text-center"><b>联系电话</b></th>
												<td id="phone">{{gym.phone}}</td>
											</tr>
											<tr>
												<th class="text-center"><b>场馆地址</b></th>
												<td id="description">{{gym.address}}</td>
											</tr>
											<tr>
												<th class="text-center"><b>场馆简介</b></th>
												<td id="description">{{gym.description}}</td>
											</tr>
											<tr>
												<th class="text-center" ><b>{{focusStatus}}</b></th>
												
												<td v-if="focusStatus=='陌生人'"  class="text-center">
												<a class="primary-btn white-bg d-inline-flex align-items-center"
															@click="focus"> <span class="mr-10">关注</span><span
															class="lnr lnr-arrow-right"></span>
														</a>
												</td>
											</tr>

										</table>

									</div>
								</div>
								<div class="tab-pane fade" id="nav-mission" role="tabpanel"
									aria-labelledby="nav-profile-tab">
									<div class="single-content">
										
										<table class="table table-striped table-hover text-center">
												<thead>
													<tr>
														<th class="text-center">序号</th>
														<th class="text-center">昵称</th>
														<th class="text-center">头像</th>
														<th class="text-center">电话</th>
														<th class="text-center">详情</th>
													</tr>
												</thead>
												<tbody>
													<tr v-for="(coach,index) in coaches" :key="index">
														<td class="text-center">{{index+1}}</td>
														<td class="text-center">{{coach.nickname}}</td>
														<td class="text-center"><img alt=""
															:src="coach.avatar" class="rounded-circle"
															style="width: 35px; height: 35px"></td>
														<td class="text-center">{{coach.phone}}</td>
														<td class="text-center">
															<button class="btn btn-outline-primary"
																@click="detail(coach.id)">查看详情</button>
														</td>
													</tr>
												</tbody>
											</table>
											
												<div class="offset-md-5">
													<ul class="pagination">
														<li class="page-item"><a class="page-link" href="#"
															@click.prevent="prePage"> <</a></li>
														<li class="page-item" v-for="(item, index) in pageNum"><a
															class="page-link" href="#"
															v-on:click.prevent="getOrders(item)"
															:class="{active: currentPage==index+1}">{{ index+1 }}</a></li>
														<li class="page-item"><a class="page-link" href="#"
															v-on:click.prevent="nextPage">></a></li>
													</ul>
												</div>
											<div class="col-lg-10 d-flex justify-content-end" v-if="role=='student'">
													<a
														class="primary-btn white-bg d-inline-flex align-items-center mt-20"
														@click="course()"> <span class="mr-10">查看课程</span><span
														class="lnr lnr-arrow-right"></span>
													</a> <br>
													<div class="alert-msg"></div>
												</div>
										
										
										
									</div>
								</div>
								<div class="tab-pane fade" id="nav-vission" role="tabpanel"
									aria-labelledby="nav-contact-tab">
									<div class="single-content">

										<form action="" method="post" class="contact-form">
											<div class="row justify-content-center">
												<div class="col-lg-5">
													<input type="text" name="fname" placeholder="您的留言标题"
														class="common-input mt-10" required v-model="title">
												</div>
												<div class="col-lg-5">
													<input type="email" name="email" placeholder="您的邮箱"
														pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$"
														class="common-input mt-10" required v-model="mail">
												</div>
												<div class="col-lg-10">
													<textarea class="common-textarea mt-10" name="message"
														placeholder="您的留言内容" required v-model="content"></textarea>
												</div>
												<div class="col-lg-10 d-flex justify-content-end">
													<a
														class="primary-btn white-bg d-inline-flex align-items-center mt-20"
														@click="message(student.id)"> <span class="mr-10">留言</span><span
														class="lnr lnr-arrow-right"></span>
													</a> <br>
													<div class="alert-msg"></div>
												</div>
											</div>
										</form>
									</div>
								</div>


									<div class="tab-pane fade" id="nav-invite" role="tabpanel"
									aria-labelledby="nav-contact-tab">
										<div class="single-content">

											<form class="contact-form">
												<div class="row justify-content-center">
													<div class="col-lg-10">
														<select class="nice-select mt-10" id="styleId" equired>
															<option value="0">请选择您最擅长的流派</option>
															<option v-for="option in styles" v-bind:value="option.id"
																class="vfor-option">{{option.styleName}}</option>

														</select>

													</div>

													<div class="col-lg-10">
														<input type="text" placeholder="请输入您的预期月薪(元)"
															class="nice-select mt-10" id="hopeSalary" required>
													</div>

													<div class="col-lg-10">
														<select class="nice-select mt-10" name="hour"
															id="hopeHour" required>
															<option value="0">请选择您期望的每日工作时长</option>
															<option value="1">1小时</option>
															<option value="2">2小时</option>
															<option value="3">3小时</option>
															<option value="4">4小时</option>
															<option value="5">5小时</option>
															<option value="6">6小时</option>
															<option value="7">7小时</option>
															<option value="8">8小时</option>
															<option value="9">9小时</option>
															<option value="10">10小时</option>
															<option value="11">11小时</option>
															<option value="12">12小时</option>
														</select>
													</div>
													<div class="col-lg-10 d-flex justify-content-end">
														<a
															class="primary-btn white-bg d-inline-flex align-items-center mt-20"
															@click="sign(gym.id)"> <span class="mr-10">申请签约</span><span
															class="lnr lnr-arrow-right"></span>
														</a> <br>
														<div class="alert-msg"></div>
													</div>
												</div>
											</form>
										</div>
									</div>



								
							</div>
						</div>
						<div class="col-lg-1"></div>
					</div>

				</div>
			</div>
			<br> <br>
		</section>
	</div>
	<!-- Strat Footer Area -->
	<footer class="section-gap">
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-sm-6">
					<div class="single-footer-widget">
						<h4 class="text-white text-uppercase mb-20">关于我们</h4>
						<ul class="footer-nav">
							<li><a href="#">设备没买</a></li>
							<li><a href="#">场地未租</a></li>
							<li><a href="#">资金暂无</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6">
					<div class="single-footer-widget">
						<h4 class="text-white text-uppercase mb-20">网页链接</h4>
						<ul class="footer-nav">
							<li><a href="#">首页</a></li>
							<li><a href="#">我的学员</a></li>
							<li><a href="#">退出登录</a></li>

						</ul>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6">
					<div class="single-footer-widget">
						<h4 class="text-white text-uppercase mb-20">合作赞助</h4>
						<ul class="footer-nav">
							<li><a href="#">我们的邮箱</a></li>
							<li><a href="#">我们的QQ</a></li>
							<li><a href="#">我们的微信</a></li>
						</ul>
					</div>
				</div>

				<div class="col-lg-3 col-sm-6">
					<div class="single-footer-widget">
						<h4 class="text-white text-uppercase mb-20">友情赞助</h4>
						<ul class="instafeed d-flex flex-wrap">
							<li><img src="/img/i1.jpg" alt=""></li>
							<li><img src="/img/i2.jpg" alt=""></li>
							<li><img src="/img/i3.jpg" alt=""></li>
							<li><img src="/img/i4.jpg" alt=""></li>
						</ul>
					</div>
				</div>
			</div>
			<div
				class="footer-bottom d-flex justify-content-between align-items-center flex-wrap">
				<p class="footer-text m-0">
					版权所有 &copy; 2020.蜗牛学院68期Class No.2 Forward To Bald .<a
						target="_blank" href="http://sc.chinaz.com/moban/"></a>
				</p>
				<div class="footer-social d-flex align-items-center">
					<a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i
						class="fa fa-twitter"></i></a> <a href="#"><i
						class="fa fa-dribbble"></i></a> <a href="#"><i
						class="fa fa-behance"></i></a>
				</div>
			</div>
		</div>
	</footer>
	<!-- End Footer Area -->


</body>

<script type="text/javascript">
	let url =window.location.href;
	let id=url.split("?id=")[1];
	new Vue({
		el:"#all",
		data:{
			gym:"",
			title:"",
			content:"",
			mail:"",
			role:"",
			styles:[],
			coaches:[],
			focusStatus:"",
			pageNum:0,
			currentPage:0,
			
		/* 	selectStyleId:"0",			
			courseId:"0",	 	
			courseTime:"",
			courseHour:0*/	
		},
		mounted(){
			axios.get("/user/hasrole").then(
					res => {
						this.role = res.data;
						console.log(res.data);
					}),
			axios.post("/coach/getUser?id="+id)
				.then(
					res => {
						if(res.data.code==200){
							let gym = res.data.data;		
							this.gym = gym;
						}else{
							layer.msg(res.data.msg);
						}
					});
					
						axios.post("/coach/getCoachInfo?id="+id).then(
								res => {
									if(res.data.code==200){
									this.styles=res.data.data.styles;
									this.courses=res.data.data.courses;
									console.log(this.styles);
									setTimeout(function () { update(); }, 500);
									}
								});
					
			
								
			
		
			axios.get("/focus/getFocusStatus?id="+id).then( res=> {
				this.focusStatus = res.data;
			}),
			this.getCoaches(1);
			
			
						
			
		},
		methods:{
			getCoaches:function(page){
				axios.get("/coach/mySginCoaches?id="+id+"&page="+page).then(
						res => {
							if(res.data.code==1){
							this.coaches=res.data.data.list;
							this.currentPage = res.data.data.nowPage;
							this.pageNum = res.data.data.totalPage;
							console.log(this.coaches);
							
							}else{
								layer.msg("系统维护中，请稍后");
							}
							
						})
			},
			
			sign:function(id){
				console.info($("#styleId").val());
				if($("#styleId").val()=="0"||$("#hopeHour").val()=="0"||$("#hopeSalary").val()==""){
					layer.msg("填好了吗？");
				}else{
					var info="我最擅长的健身流派是："+$("#styleId").find("option:selected").text()+"；我的期望月薪是："+$("#hopeSalary").val()+"元；我的期望工作时长是："+$("#hopeHour").val()+"小时，点击接受解锁新英雄哦！";
				var params = new URLSearchParams();
			      params.append("userIdGym", id);
			      params.append("info", info);
			     
			      axios({
			        url: "/coach/sign",
			        method: "post",
			        data: params
			      }).then(res => {
			    	  if(res.data.code==200){
			    		  layer.msg(res.data.msg);
			    		  $("#styleId").val("0");
			    		  $("#hopeSalary").val("");
			    		  $("#hopeHour").val("0");
			    		  $('select').niceSelect('update');
						}else{
							layer.msg(res.data.msg);
						}
			      });
				}
			},
			message:function(id){
				let message=this.title+"~"+this.content+"~"+this.mail;
				axios.post("/coach/message?id="+id+"&message="+message).then(res =>{				
						layer.msg(res.data.msg);		
						this.title="";
						this.mail="";
						this.content="";
				})
				
			},
			focus:function(){
				axios.get("/focus/addFocus?id="+id).then( res=> {
					if(res.data.code==1){
						layer.msg("关注成功!");
						this.focusStatus = "已关注";
					}else{
						lay.msg("系统繁忙，请稍后再试!")
					}
				})
			},
			course:function(){
				location.href="/xingqilin/classShow.html?id="+id;
			},
			detail:function(id){
				location.href="/lsw/coach_view.html?id="+id;
			},
			prePage:function(){
				if(this.currentPage>1){
					this.getOrders(this.currentPage-1);
				}
			},
			nextPage:function(){
				if(this.currentPage<this.pageNum){
					this.getOrders(this.currentPage+1);
				}
			},
			
		}

	})


	
	/*  setTimeout(function () { update(); }, 1000); */
	
	function update(){
		$('select').niceSelect('update');
		}; 
	$("select").click(function(){
		$('select').niceSelect('update');
		});
</script>

</html>
